<template>
    <div>
       <el-table :data="props.list"  size="large" border="true" :fit="true" row-class-name="row_name"  :header-cell-style="{
           textAlign: 'center',
           height: '42px',
       	background: '#e9f2fa',
       }">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column label="Date" width="180" >
            </el-table-column> -->
            <el-table-column prop="job_num" label="员工工号" align="center" />
            <el-table-column prop="nickname" label="员工名称" align="center" />
            <el-table-column prop="role_name" label="所属部门" align="center" />
            <el-table-column prop="area_msg" label="地区" align="center" />
            <el-table-column label="员工状态" align="center">
                <template #default="scope">
                    {{ scope.row.status ? "正常" : "禁用" }}
                </template>
            </el-table-column>
            <el-table-column prop="updated_operator_name" label="创建人" align="center" />
            <el-table-column prop="created_at" label="创建时间" align="center" />
			<el-table-column fixed="right" label="操作" align="center" width="300">
                <template #default="scope">
                    <div class="operate">
                        <el-button type="primary" @click="view_data(scope.row)">查看</el-button>
                        <el-button type="success" @click="change_data(scope.row)">编辑</el-button>
                         <el-button type="danger" @click="delete_data(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" width="30%" modal-class="index_dialogVisible">
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                    size="large">
                    <el-form-item label="员工工号">
                        <el-input v-model="ruleForm.job_num" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="员工名称">
                        <el-input v-model="ruleForm.nickname" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="所属部门">
                        <el-input v-model="ruleForm.role_name" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="地区">
                        <el-input v-model="ruleForm.area_msg" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="员工状态">
                        <el-input v-model="ruleForm.status" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="创建人">
                        <el-input v-model="ruleForm.updated_operator_name" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-input v-model="ruleForm.created_at" autocomplete="off" disabled />
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import { defineProps, ref, reactive } from "vue"
import { get_time } from "@/utils/time"
import { delete_user_list } from "@/request/api/user.ts"
const props = defineProps(["list"])
let dialogVisible = ref(false)
interface User {
    date: string
    name: string
    address: string
}
// 全部勾选的id数组
let selection_data: any = []
const emits = defineEmits(["change"])
interface User {
    date: string
    name: string
    address: string
}

const delete_data = async (row: any) => {
    let ids: any = []
    if (selection_data.length > 0) {
        selection_data.forEach((item: any) => {
            ids.push(item.id)
        });
    } else {
        ids.push(row.id)
    }
    let data: any = await delete_user_list({ id: ids })
    console.log(data, "data");

    console.log(data, "data");
    if (data.message == "success") {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        location.reload()
    } else {
        ElMessage.error(data.message)
    }
}
// 编辑
const change_data = (row: any) => {
    emits("change", row)
}
const select = (selection: any) => {
    selection_data = selection
}
let ruleForm = reactive({
    job_num: "",
    nickname: "",
    role_name: "",
    area_msg: "",
    updated_operator_name: "",
    created_at: "",
    status: ""
})
const view_data = (row: any) => {
    ruleForm.job_num = row.job_num
    ruleForm.nickname = row.nickname
    ruleForm.role_name = row.role_name
    ruleForm.status = row.status ? "正常" : "禁用"
    ruleForm.area_msg = row.area_msg
    ruleForm.created_at = row.created_at
    ruleForm.updated_operator_name = row.updated_operator_name

    dialogVisible.value = true
}
</script>
<style lang="scss" scoped>
	:deep(.cell){
	    color:#5e6d82 ;
	    font-size: 13px;
	}
	:deep(thead){
	    .cell{
	        color:#1f2f3d ;
	        font-size: 14px;
	        font-weight: 650;
	    }
	}
:deep(.el-table td.el-table__cell) {
    // border-bottom: none;
}

:deep(.el-table th.el-table__cell.is-leaf) {
    // border-bottom: none;
}

:deep(.el-table__inner-wrapper) {
    &::before {
        height: 0;
    }
}

:deep(.el-table th.el-table__cell) {
    background-color: rgb(242, 242, 242);
}

.operate {
    display: flex;
    justify-content: space-between;

    span {
        cursor: pointer;
    }

    .bianji {
        color: rgb(112, 182, 3);
    }

    .shanchu {
        color: rgb(245, 108, 108);
    }
}

:deep(.index_dialogVisible) {
.el-dialog__header{
    background: #FFF;
}
.el-dialog__headerbtn{
  display: block;
}
}
:deep(.row_name){
   height: 42px !important;
}
:deep(.el-table__cell){
    padding: 0;
}
</style>